<template>
    <div class="container pb-5"  style="width:70%">
        <div>
            <div>
                <span class="p-1 ps-5 pe-5"  style="background:#337ecc; color: white;">债务人信息</span>
            </div>
            <el-row>
                <el-col :span="8">
                    <span>债务人姓名：</span>
                    <span>李锋刚</span>
                </el-col>
                <el-col :span="8">
                    <span>债务人性别：</span>
                    <span>男</span>
                </el-col>
                <el-col :span="8">
                    <span>债务人手机号：</span>
                    <span>130****3252</span>
                </el-col>
                <el-col :span="8">
                    <span>债务人身份证号：</span>
                    <span>522129*********5013</span>
                </el-col>
                <el-col :span="8">
                    <span>债务人学历：</span>
                    <span>硕士</span>
                </el-col>
                <el-col :span="8">
                    <span>债务人工作单位：</span>
                    <span>汕头市***有限公司</span>
                </el-col>
                <el-col :span="16">
                    <span>债务人地址：</span>
                    <span>汕头市龙湖区中山路*****室</span>
                </el-col>
            </el-row>
        </div>
        <div class="mt-5">
            <div>
                <span class="p-1 ps-5 pe-5"  style="background:#337ecc; color: white;">债权合同信息</span>
            </div>
            <el-row>
                <el-col :span="8">
                    <span>债权人名称：</span>
                    <span>李锋刚</span>
                </el-col>
                <el-col :span="8">
                    <span>债权本金：</span>
                    <span>13234323</span>
                </el-col>
                <el-col :span="8">
                    <span>债权利息：</span>
                    <span>312232</span>
                </el-col>
                <el-col :span="8">
                    <span>债务总额：</span>
                    <span>10000000000</span>
                </el-col>
                <el-col :span="8">
                    <span>代垫费用：</span>
                    <span>202000</span>
                </el-col>
                <el-col :span="8">
                    <span>保证人：</span>
                    <span>汕头市***有限公司</span>
                </el-col>
                <el-col :span="16">
                    <span>抵押物：</span>
                    <span>汕头市龙湖区中山路*****室</span>
                </el-col>
            </el-row>
        </div>
        <div class="pt-5">
            <el-table :data="tableData" border highlight-current-row stripe style="width: 100%">
                <el-table-column prop="date" label="调解日期"/>
                <el-table-column prop="center" label="调解中心名称"/>
                <el-table-column prop="name" label="调解员/律师姓名" />
                <el-table-column prop="phone" label="调解员/律师联系方式" />
                <el-table-column prop="type" label="调解类型" />
                <el-table-column prop="remark" label="调解结果描述" />
            </el-table>
        </div>
    </div>
</template>
<script setup lang="ts">
    import { useRouter } from "vue-router";

    const router = useRouter();
    const tableData = [
        {
            date: '2023-11-01',
            center: '深圳',
            name: '张伟（调解员）',
            phone:'13087893243',
            type:'电话催收',
            remark:'债务人未接听'
        },
        {
            date: '2023-11-05',
            center: '深圳',
            name: '刘涛（调解员）',
            phone:'18732439090',
            type:'电话催收',
            remark:'债务人未接听'
        },
        {
            date: '2023-12-10',
            center: '深圳',
            name: '刘伟（律师）',
            phone:'15189897432',
            type:'律师上门',
            remark:'债务信息已告知债务人'
        }
    ]
    const detail = () => {
        router.push('')
    }
</script>
<style scoped>
    .el-row {
        padding: 0 8px;
        background: #d9ecff;
        border: 1px solid #337ecc;
    }
    .el-col {
        padding:10px 0;
    }
</style>